<template>
  <div>
    <div class="emotion-box" :style="{height: height + 'px' }" >
      <div class="emotion-box-line" v-for="(line, i) in list" :key="i" >
        <emotion class="emotion-item" v-for="(item, i) in line" :key="i" @click.native="clickHandler(item)" >{{item}}</emotion>
      </div>
    </div>
  </div>
</template>

<script>
import Emotion from './Emotion'
export default {
  props: {
    height: {
      type: Number,
      default: 200,
    }
  },
  data () {
    return {
      list: [
        ['zb1_1', 'zb1_2', 'zb1_3', 'zb1_4', 'zb1_5', 'zb1_6', 'zb1_7', 'zb1_8'],
        ['zb1_9', 'zb1_10', 'zb1_11', 'zb1_12', 'zb1_13', 'zb1_14', 'zb1_15', 'zb1_16'],
        ['zb1_17', 'zb1_18', 'zb1_19', 'zb1_20', 'zb1_21', 'zb1_22', 'zb1_23', 'zb1_24'],
        ['zb1_25', 'zb1_26', 'zb1_27', 'zb1_28', 'zb1_29', 'zb1_30', 'zb1_31', 'zb1_32'],
        ['zb1_33', 'zb1_34', 'zb1_35', 'zb1_36', 'zb1_37', 'zb1_38', 'zb1_39', 'zb1_40'],
        ['zb1_41', 'zb1_42', 'zb1_43', 'zb1_44', 'zb1_45', 'zb1_46', 'zb1_47', 'zb1_48'],
        ['zb1_49', 'zb1_50', 'zb1_51', 'zb1_52', 'zb1_53', 'zb1_54', 'zb1_55', 'zb1_56'],
        ['zb1_57', 'zb1_58', 'zb1_59', 'zb1_60', 'zb1_61', 'zb1_62', 'zb1_63', 'zb1_64'],
        ['zb1_65', 'zb1_66', 'zb1_67', 'zb1_68', 'zb1_69', 'zb1_70', 'zb1_71', 'zb1_72'],
        ['zb1_73', 'zb1_74', 'zb1_75', 'zb1_76', 'zb1_77', 'zb1_78', 'zb1_79', 'zb1_80'],
        ['zb1_81', 'zb1_82', 'zb1_83', 'zb1_84', 'zb1_85', 'zb1_86', 'zb1_87', 'zb1_88'],
        ['zb1_89', 'zb1_90', 'zb1_91', 'zb1_92', 'zb1_93', 'zb1_94', 'zb1_95', 'zb1_96'],
        ['zb1_97', 'zb1_98', 'zb1_99', 'zb1_100', 'zb1_101', 'zb1_102', 'zb1_103', 'zb1_104']
      ]
    }
  },
  methods: {
    clickHandler (i) {
      let emotion = `#${i};`
      this.$emit('emotion', emotion)
    }
  },
  components: {
    Emotion
  }
}
</script>
<style scoped>
  .emotion-box {
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #b4b4b4;
    overflow: hidden;
    overflow-y: auto;
  }
  .emotion-box-line {
    display: flex;
  }
  .emotion-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
  }
</style>